<script setup lang="ts">
import {
  getMemberAddressByIdAPI,
  postMemberAddressAPI,
  putMemberAddressByIdAPI,
} from '@/services/address';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import cityItem from '@/pagesMember/profile/city.json';

// 表单数据
const form = ref({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
});

// 获取页面参数
const query = defineProps<{
  id?: string;
}>();
const city = ref(cityItem);
// 获取收货地址详情数据
const getMemberAddressByIdData = async () => {
  if (query.id) {
    uni.showLoading();
    const res = await getMemberAddressByIdAPI(query.id);
    uni.hideLoading();
    // 把数据合并到表单中
    Object.assign(form.value, res.result);
  }
};

// 页面加载
onLoad(() => {
  getMemberAddressByIdData();
});

// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' });

// 收集所在地区数据
// #ifdef MP-WEIXIN
const onRegionChange: UniHelper.RegionPickerOnChange = (event) => {
  // 前端页面展示
  form.value.fullLocation = event.detail.value.join(' ');
  // 后端参数
  const [provinceCode, cityCode, countyCode] = event.detail.code!;
  // 把数据合并到对象中（对象合并）
  Object.assign(form.value, {
    provinceCode,
    cityCode,
    countyCode,
  });
};
// #endif

// #ifdef H5 || APP-PLUS
const onDataRegionChange = (event: {
  detail: { value?: any[]; code?: [string, string, string] };
}) => {
  console.log(event, 'event');
  // 前端页面渲染
  form.value.fullLocation = event.detail.value
    ?.map((item) => item.text)
    .join(' ')!;
  const [provinceCode, cityCode, countyCode] = event.detail.value?.map(
    (item) => item.value
  )!;
  // 把数据合并到对象中（对象合并）
  Object.assign(form.value, {
    provinceCode,
    cityCode,
    countyCode,
  });
};
// #endif
// 收集是否默认地址数据
const onSwitchChange: UniHelper.SwitchOnChange = (event) => {
  form.value.isDefault = event.detail.value ? 1 : 0;
};
// 定义表单规则
const rules: UniHelper.UniFormsRules = {
  receiver: {
    rules: [
      {
        required: true,
        errorMessage: '请输入收货人',
      },
    ],
  },
  contact: {
    rules: [
      { required: true, errorMessage: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号不正确' },
    ],
  },
  fullLocation: {
    rules: [{ required: true, errorMessage: '请选择所在地区' }],
  },
  address: {
    rules: [{ required: true, errorMessage: '请填写详细地址' }],
  },
};
// 表单组件实例
const formRef = ref<UniHelper.UniFormsInstance>();
// 表单提交
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value?.validate?.();
    // 判断是否有id
    if (query.id) {
      // 调用修改地址接口
      await putMemberAddressByIdAPI(query.id, form.value);
    } else {
      // 调用新建地址接口
      await postMemberAddressAPI(form.value);
    }
    uni.showToast({
      icon: 'success',
      title: query.id ? '修改地址成功' : '添加地址成功',
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 400);
  } catch (error) {
    uni.showToast({
      icon: 'error',
      title: '请填写完整信息',
    });
  }
};
</script>

<template>
  <view class="content">
    <uni-forms
      :rules="rules"
      :modelValue="form"
      ref="formRef"
      validate-trigger="bind"
    >
      <!-- 表单内容 -->
      <uni-forms-item name="receiver" class="form-item">
        <text class="label">收货人</text>
        <input
          class="input"
          placeholder="请填写收货人姓名"
          v-model="form.receiver"
        />
      </uni-forms-item>
      <uni-forms-item name="contact" class="form-item">
        <text class="label">手机号码</text>
        <input
          class="input"
          placeholder="请填写收货人手机号码"
          v-model="form.contact"
        />
      </uni-forms-item>
      <uni-forms-item name="fullLocation" class="form-item">
        <!-- #ifdef MP-WEIXIN -->
        <text class="label">所在地区</text>
        <picker
          @change="onRegionChange"
          class="picker"
          mode="region"
          :value="form.fullLocation.split(' ')"
        >
          <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
        <!-- #endif -->

        <!-- #ifdef H5 || APP-PLUS -->
        <text class="label">所在地区</text>
        <uni-data-picker
          v-model="form.fullLocation"
          class="data-picker"
          :localdata="city"
          :placeholder="form.fullLocation ? form.fullLocation : `请选择城市`"
          popup-title="城市/地区"
          @change="onDataRegionChange"
          :clear-icon="false"
          :ellipsis="false"
        ></uni-data-picker>
        <!-- #endif -->
      </uni-forms-item>
      <uni-forms-item name="address" class="form-item">
        <text class="label">详细地址</text>
        <input
          class="input"
          placeholder="街道、楼牌号等信息"
          v-model="form.address"
        />
      </uni-forms-item>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch
          @change="onSwitchChange"
          class="switch"
          color="#ec602b"
          :checked="form.isDefault === 1"
        />
      </view>
    </uni-forms>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
:deep(.input-value-border) {
  border: none !important;
  position: relative;
  left: -20rpx;
}
:deep(.placeholder) {
  color: gray !important;
  font-size: 32rpx !important;
}
:deep(.input-arrow) {
  display: none;
}
:deep(.text-color[data-v-2437acbd]) {
  color: #333;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    padding: 20rpx 10rpx 30rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #ec602b;
}
</style>
